<!doctype html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<div layout:fragment="content" class="card-body main-content config">
    <form id="data-form">
        <div class="form-group">
            <label for="default-remark-input">默认说明</label>
            <textarea id="default-remark-input" name="defaultRemark" class="form-control"
                      maxlength="255" rows="3"></textarea>
        </div>
        <div class="form-group">
            <label for="vehicle-type-add-button">车辆类型</label>
            <input name="vehicleTypes" type="hidden">
            <div class="btn-group d-flex">
                <button id="vehicle-type-add-button" type="button" class="btn btn-outline-success add-button">
                    <i class="fa fa-plus"></i>
                </button>
                <button type="button" class="btn btn-outline-info edit-button">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" class="btn btn-outline-danger delete-button">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="input-box collapse">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入列表项">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="fa fa-check"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="list-group data-list-group">
                <div class="list-group-footer">共0项</div>
            </div>
        </div>
        <div class="form-group">
            <label for="vehicle-nature-add-button">车辆使用性质</label>
            <input name="vehicleNatures" type="hidden">
            <div class="btn-group d-flex">
                <button id="vehicle-nature-add-button" type="button" class="btn btn-outline-success add-button">
                    <i class="fa fa-plus"></i>
                </button>
                <button type="button" class="btn btn-outline-info edit-button">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" class="btn btn-outline-danger delete-button">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="input-box collapse">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入列表项">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="fa fa-check"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="list-group data-list-group">
                <div class="list-group-footer">共0项</div>
            </div>
        </div>
        <div class="form-group">
            <label for="power-type-add-button">动力类别</label>
            <input name="powerTypes" type="hidden">
            <div class="btn-group d-flex">
                <button id="power-type-add-button" type="button" class="btn btn-outline-success add-button">
                    <i class="fa fa-plus"></i>
                </button>
                <button type="button" class="btn btn-outline-info edit-button">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" class="btn btn-outline-danger delete-button">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="input-box collapse">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入列表项">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="fa fa-check"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="list-group data-list-group">
                <div class="list-group-footer">共0项</div>
            </div>
        </div>
        <button id="refresh-button" type="button" class="btn btn-primary mt-3">刷新</button>
        <button id="submit-button" type="button" class="btn btn-primary mt-3">提交</button>
    </form>

    <script id="list-group-template" type="text/html">
        {{each list item index}}
            <div class="list-group-item">{{item}}</div>
        {{/each}}
        <div class="list-group-footer">共{{list.length}}项</div>
    </script>
</div>
</html>
